.horizontal-gradient(@a,@b,@c) {
    background: @a;
    background: -moz-linear-gradient(left, @a 0%, @b, @c 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,@a), color-stop(50%,@b), color-stop(100%,@c));
    background: -webkit-linear-gradient(left, @a 0%,@b 50%,@c 100%);
    background: -o-linear-gradient(left, @a 0%,@b 50%,@c 100%);
    background: -ms-linear-gradient(left, @a 0%,@b 50%,@c 100%);
    background: linear-gradient(to right, @a 0%,@b 50%,@c 100%);
}


.vertical-gradient-two-colors(@a,@b) {
   
    background: @a;
    background: -moz-linear-gradient(top, @a 0%, @b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@a), color-stop(100%,@b));
    background: -webkit-linear-gradient(top, @a 0%,@b 100%);
    background: -o-linear-gradient(top, @a 0%,@b 100%);
    background: -ms-linear-gradient(top, @a 0%,@b 100%);
    background: linear-gradient(to bottom, @a 0%,@b 100%);
}

.box-shadow(@a,@b,@c,@d,@e) {
    -webkit-box-shadow:  @a @b @c @d @e;
    box-shadow: @a @b @c @d @e;
}


body {
    background-color: @body-background-color;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    text-align: center;
}

body > div {
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    position: absolute;
    height: 100%;
    .box-shadow(0px,0px,5px,5px, rgba(0,0,0,0.4) );
}

body > div > #process
{
    left: 0px;
    width: 1000px;
    top: 0px;
    bottom: 0px;
    display: none;
}

body > div >  header {
    left: 0px;
    top: 0px;
    right: 0px;
    height: 35px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: @header-line-color;
    .horizontal-gradient(@header-gradient-left-color,@header-gradient-middle-color,@header-gradient-middle-right);
}

body > div > header > div:first-child {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 35px;
    width: 180px;
    background-image: url( @header-logo-path );
}


body > div > nav {
    left: 0px;
    top: 37px;
    width: 179px;
    bottom: 0px;
    position: absolute;
    overflow: hidden;
    padding-top: 15px;
    border-right: solid 1px #D0D0D0;
    background-color: @nav-background-color;
}

body > div > nav > button {
    width: 100%;
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0px;
    margin: 0px;
    height: 35px;
    text-align: left;
    padding-left: 10px;
    color: @nav-button-text-color;
}

bidy > div > nav >  button:disabled {
    width: 100%;
    border: none;
    font-weight: bold;
    background-color: red;    
}

body > div > nav > button:disabled {
    .nav-selected-styles();
}

body > div > div {
    left: 180px;
    top: 37px;
    width: 820px;
    bottom: 0px;
    background-color: white;
    position: absolute;
    overflow: auto;
}



body > div > header > div:first-child {
    background-size: 180px 54px;
}




body > div > header > button:hover
{
    background-color: #A7ED9E;
background-image: -o-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
background-image: -moz-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
background-image: -ms-linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
background-image: linear-gradient(90deg , rgb(138,211,129) 0%, rgb(204,237,200) 100%);
}

body > div > header > button
{
   background-color: #85DD7C;
border: 1px solid #158D34;
-moz-box-shadow: inset 0px 0px 1px rgba(26,154,72,1);
-webkit-box-shadow: inset 0px 0px 1px rgba(26,154,72,1);
box-shadow: inset 0px 0px 1px rgba(26,154,72,1);
background-image: -o-linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
background-image: -moz-linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
background-image: -ms-linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
background-image: linear-gradient(90deg , rgb(112,201,101) 0%, rgb(182,237,176) 100%);
color: #1d7819;


text-shadow: rgba(254, 252, 252, 0.5) 0px 1px 0px;
display: block;
width: 120px;
height: 28px;
border-radius: 4px;
text-align: center;
text-decoration: none;
font-family: 'Helvetica';
font-weight: bold;
font-size: 10pt;
float: left;
margin: 0;
}

body > div > header > button
{
position: absolute;
right: 8px;
top: 4px;
}


body > div > nav > button:disabled > div {
  border-color: transparent @app-background-color transparent transparent;
 border-style: solid;
 border-width: 7px;
 position: absolute;
 margin-top: -14px;
 right: 0px;
 z-index: 1000;
 height:0;
 width:0;
}



body > #page > div:last-child {
    background-color: @app-background-color;
}

body > #page.loading > div:last-child {
    display: none;
}



body > #page.exception > div:last-child {
    display: none;
}

body > #page.exception > #starting {
    display: none;
}


body > #page.exception > #exception {
    z-index: 10000;
}


body > #page.process > #starting {
    display: none;
}


body > #page.process > #exception {
    display: none;
}

body > #page.process > #process ,
body > #page.loading > #process {
    z-index: 1000;
    display: block;
}

body > #page > #process {
    background-color: rgba(255,255,255,0.6);
}

body > #page > #process > img {
    left: 50%;
    top: 30%;
    position: absolute;
    display: block;
    margin-left: -8px;
}

body > #page > #process > div {
    background-color: white;
    display: inline-block;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: solid 1px #c0c0c0;
    padding: 4px;
    font-family: arial;
    font-size: 10px;
    border-top: none;
}